<template>
  <!---------- 搜索表单区域 ----------->
  <SearchFormTemplate ref="searchRef" :searchConfig="searchConfig" @search="getTableData" @reset="handleReset" />

  <!---------- 顶部按钮区域 ----------->
  <ToolbarTemplate :toolbarConfig="toolbarConfig" />

  <!---------- 表格区域 ----------->
  <TableTemplate :columns="columns" ref="tableRef" />
  
  <!-- 添加表单 -->
  <AgentInvoiceAdd ref="addRef" @dataReload="getTableData" />
  
  <!-- 修改表单  -->
  <AgentInvoiceEdit ref="editRef" @dataReload="getTableData" />

</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import SearchFormTemplate from '@/components/template/form/search-form-template.vue';// 搜索区模版
  import ToolbarTemplate from '@/components/template/button/toolbar-template.vue';// 操作区模版
  import TableTemplate from '@/components/template/table/table-template.vue';//分页表格模版
  import AgentInvoiceAdd from '@/views/agent_invoice/agent_invoice_add.vue';//模块添加页
  import AgentInvoiceEdit from '@/views/agent_invoice/agent_invoice_edit.vue';//模块添加页
  import { type CustomTableColumnType } from '@/types/table';//扩展 TableColumnType 定义

  /* [显示弹窗] 1.调用子组件显示添加窗体 */
  const onAdd = () => {
    addRef.value?.show();//调用子组件 显式弹窗方法
  };
  const addRef = ref<typeof AgentInvoiceAdd | null>(null);//模块添加模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [显示弹窗] 1.接收传入的ID,2.调用子组件显示修改窗体 */
  const onEdit = (id: number) => {
    editRef.value?.show(id);//调用子组件 显示 弹窗方法
  };
  const editRef = ref<typeof AgentInvoiceEdit | null>(null);//模块修改模态弹窗组件引用，用与调用模态弹窗组件内部方法
  
  /* [获取表格数据] 1.调用 table-template 组件的 getTableData 方法 获取数据 2.处理数据 3.赋值 */
  const getTableData = async (searchParams?: Record<string, any>) => { 
    //合并搜索参数和页面参数
    const mergedParams = searchParams ? { ...pageParams, ...searchParams } : pageParams;
    await tableRef.value?.getTableData(pageAction, mergedParams);
  };
  // 重置后重新拉数据
  const handleReset = () => {
    // 重置表格数据到初始状态
    getTableData();
  };
  const tableRef = ref<typeof TableTemplate | null>(null);//table-template组件引用，用于执行组件内部方法
  const pageAction = 'base.agent.agentinvoice.ServiceImpl.page';//page数据 请求接口 方法名
  const pageParams = { account_type: "3" };//page数据 请求参数,查询总后台模块


  
  onMounted(() => { 
    getTableData(); 
  }); //组件加载完成时，获取表格数据

  /* [按钮配置] */
  const toolbarConfig = [
    {
      text: '新建',
      type: 'primary',
      icon: 'add' as const,
      permission: 'agent_invoice_add',
      onClick: onAdd
    }
  ];

  /* [搜索配置] */
  const searchConfig = [
    {title: '创建时间（未实现）',dataIndex: 'create_time',type: 'date-range' as const,width: 250}
  ];

  /* [表格配置] */
  const columns: CustomTableColumnType<any>[] = [ 
    {title: '代理商名称',fixed: 'left',dataIndex: 'agent_name',},
    {title: '发票形式',fixed: 'left',dataIndex: 'invoice_form',options: {1: '电子发票', 2: '纸质发票'}},
    {title: '发票类型',fixed: 'left',dataIndex: 'invoice_type',options: {1: '专票', 2: '普票'}},
    {title: '纳税人标识',dataIndex: 'taxpayer_id'},
    {title: '联系人姓名',dataIndex: 'contact_name'},
    {title: '联系人电话',dataIndex: 'contact_phone'},
    {title: '发票邮寄地址',dataIndex: 'post_address'},
    {title: '邮编',dataIndex: 'post_code'},
    {title: '开票联系电话',dataIndex: 'invoice_phone'},
    {title: '开票地址',dataIndex: 'invoice_address'},
    {title: '开户银行名称',dataIndex: 'account_bank'},
    {title: '账号信息',dataIndex: 'account_no'},
    {title: '邮箱',dataIndex: 'email'},
    {title: '备注',dataIndex: 'remark'},
    {title: '创建时间',dataIndex: 'create_time',width: 150,},
    {title: '更新时间',dataIndex: 'update_time',width: 150,},
    {title: '操作',dataIndex: 'action',
      buttons: [
        {
          children: () => '修改',
          type: 'link',
          permission: 'agent_invoice_edit',
          onClick: (record) => onEdit(record.agent_invoice_id),
        },
        {
          children: () => '删除',
          type: 'link',
          permission: 'agent_invoice_delete',
          onClick: () => {},
        }
      ]
    }
  ]
</script>
<style lang="less" scoped>
</style>
